<template>
  <div class="rank">
    <span>{{childIndex+1}}</span>
    <div class="leftImg">
      <img :src="childMsg.imgUrlIcon" alt="">
    </div>
    <div class="leftContent">
      {{childMsg.name}}
    </div>
    <span ref="texts1" class="game-size" @mouseover='down'>{{childMsg.gameSize}}</span>
    <a ref="download" class="btn" @mouseleave='hide' :href="childMsg.downloadUrl" download>下载</a>
  </div>
</template>

<script>
export default {
  name: 'rankList',
  props: [ 'childMsg', 'childIndex' ],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    down: function () {
      this.$nextTick(() => {
        this.$refs.texts1.style.display = 'none'
        this.$refs.download.style.display = 'inline-block'
      })
    },
    hide: function () {
      this.$nextTick(() => {
        this.$refs.texts1.style.display = 'inline-block'
        this.$refs.download.style.display = 'none'
      })
    }
  }
}
</script>
<style scoped>
  .rank{
     display: flex;
     flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    color: #737373;
   }
  .rank:hover{
    color: #009688;
  }
  .rank span{
    color: #aaa;
  }
  .right-border .el-col-8 .el-col-24:nth-child(2) span,
  .right-border .el-col-8 .el-col-24:nth-child(3) span,
  .right-border .el-col-8 .el-col-24:nth-child(4) span
  {
    color:#FF9800;
  }
  .rank img{
    width: 36px;
    height: 36px;
    margin: 0 10px;
  }
  .rank .btn{
    position: absolute;
    right: 20px;
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background: #009688;
    display: none;
  }
  .right-border .el-col-8 .el-col-24 span.game-size{
    position: absolute;
    right: 20px;
    color: #737373;
    display: block;
  }

</style>
